import 'dart:async';

import 'package:flutter/material.dart';

class AnimatedSwitcherHomePage extends StatefulWidget {
  @override
  _AnimatedSwitcherHomePageState createState() =>
      _AnimatedSwitcherHomePageState();
}

class _AnimatedSwitcherHomePageState extends State<AnimatedSwitcherHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimatedSwitcher动画"),
      ),
      backgroundColor: Colors.grey,
      body: Column(
        children: [
          Container(
            height: 180,
            width: MediaQuery.of(context).size.width,
            color: Colors.white,
            child: buildAnimatedSwitcher(context),
          ),
          buildContainer()
        ],
      ),
    );
  }

  int _count = 200;
  int flag = 0;
  Widget buildAnimatedSwitcher(BuildContext context) {
    return AnimatedSwitcher(
      // 切换时间 定义
      // 我来解读一下， http://www.androidchina.net/10521.html 文献参考
      // 页面显示在屏幕时，Offset的dx dy均为0；
      // 如果需要动画页面从屏幕底部弹出，则应该是dy=1 到 dy=0；
      // 如果需要动画页面从右侧推入到屏幕，则应该是dx=1 到 dx=0；
      // 如果需要动画页面从屏幕顶部弹出，则应该是dy=0 到 dy=-1
      // 其他类似
      duration: Duration(milliseconds: 1300),
      // 让文本动起来
      transitionBuilder: (Widget child, Animation<double> animation) {
        flag++;
        Offset startOffset = Offset(0.0, -1.0);
        Offset endOffset = Offset(0.0, 0.0);
        if (flag % 2 != 0) {
          startOffset = Offset(0.0, 1.0);
          endOffset = Offset(0.0, 0.0);
        }
        print("flat:$flag startOffset $startOffset child $child");

        // 先来个透明渐变动画
        return SlideTransition(
          position: Tween(begin: startOffset, end: endOffset).animate(
            CurvedAnimation(parent: animation, curve: Curves.linear),
          ),
          child: FadeTransition(
            opacity: Tween(begin: 0.6, end: 1.0).animate(
              CurvedAnimation(parent: animation, curve: Curves.linear),
            ),
            child: ScaleTransition(
              scale: Tween(begin: 0.6, end: 1.0).animate(
                CurvedAnimation(parent: animation, curve: Curves.linear),
              ),
              child: child,
            ),
          ),
        );
      },
      // 定义文本
      child: Text(
        "$_count",
        key: ValueKey("$_count"),
        style: TextStyle(
            color: Colors.black, fontSize: 44, fontWeight: FontWeight.w500),
      ),
    );
  }

// 定义定时器
  Timer _timer;
  void startTimer() {
    // setState(() {
    //   _count++;
    // });
    stopTimer();
    _timer = Timer.periodic(
      Duration(milliseconds: 1600),
      (timer) {
        setState(() {
          _count++;
        });
      },
    );
  }

  void stopTimer() {
    if (_timer != null) {
      _timer.cancel();
    }
  }

  buildContainer() {
    return Container(
      padding: EdgeInsets.all(40),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              startTimer();
            },
            child: Text("开始"),
          ),
          SizedBox(width: 20),
          ElevatedButton(
            onPressed: () {
              stopTimer();
            },
            child: Text("结束"),
          ),
        ],
      ),
    );
  }
}
